<?php
$p = \Yii::$app->controller->module->templateAsset."/kuaileyixia/";
?>

<style type="text/css">
.showwords 
{
    font-size: 23px;
    color: black;
    position: absolute;
    z-index: 1;
    top: 80%;
    margin: -39px;
    left: 39px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 6px;
    /*background-color: rgba(255, 255, 255, 0.53);*/
    text-shadow: 4px 4px 10px white, -4px 4px 10px white, -4px -4px 10px white, 4px -4px 10px white;
    /*border-radius: 40px;*/
}   
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

html,body,.main-body
{
    background-color: white;
     height:100%;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container > img, #container > div
{
    position: absolute;
}
.page
{
    width: 500px;
    height: 815px;
    position: absolute;

}
.page > img,.page > div
{
    position: absolute;
}
#summer
{
    left: 30px;
    top: 544px;
    opacity: 0;
}
#kuang1
{
    position: absolute;
    left: 0px;
    top: 0px;
    /*opacity: 0;*/
}
#mao
{
    left: 30px;
    top: 679px;
    opacity: 0;
}
#sun
{
    left: 342px;
    top: 4px;
    opacity: 0;
}
#shu1
{
    left: 0px;
    top: 8px;
    opacity: 0;
}
#hua
{
    left: 324px;
    top: 465px;
    opacity: 0;
}
#bei
{
    left: 111px;
    top: 507px;
    opacity: 0;
}
#shu2
{
    left: 421px;
    top: 534px;
    opacity: 0;
}
#div1h
{
    width: 700px;
    height: 541px;
    background-color: #fff;
    left: 0px;
    top: 0px;
    /*display: none;*/
    position: absolute;
    overflow: hidden;
}
#div1v
{
    width: 500px;
    height: 700px;
    background-color: #fff;
    left: 0px;
    top: 0px;
    display: none;
    position: absolute;
    overflow: hidden;
}
#div1
{
    position: absolute;
    opacity: 0;
}
#haixing
{
    left: 417px;
    top: 602px;
}
#tuoxie
{
    left: -3px;
    top: 686px;
}
#shu3
{
    left: 0px;
    top: 369px;
}
#zi2
{
    left: 85px;
    top: 479px;
}
#yanjing
{
    left: 53px;
    top: 610px;
}
#xingli
{
    left: 317px;
    top: 83px;
}
#div21h
{
    left: 21px;
    top: 31px;
    width: 320px;
    height: 240px;
    background-color: #ccc;
    border: 5px solid #fff;
    -webkit-transform: rotate(2deg);
    position: absolute;
}
#div22h
{
    left: 148px;
    top: 253px;
    width: 320px;
    height: 240px;
    background-color: #ccc;
    border: 5px solid #fff;
    -webkit-transform: rotate(-5deg);
    position: absolute;
}
#div21v
{
    left: 31px;
    top: 15px;
    width: 240px;
    height: 320px;
    background-color: #ccc;
    border: 5px solid #fff;
    -webkit-transform: rotate(2deg);
    position: absolute;
}
#div22v
{
    left: 246px;
    top: 215px;
    width: 230px;
    height: 308px;
    background-color: #ccc;
    border: 5px solid #fff;
    -webkit-transform: rotate(-3deg);
    position: absolute;
}
#bei3
{
    left: 0px;
    top: 453px;
}
#zi3
{
    left: 101px;
    top: 51px;
}
#shu4
{
    left: 0px;
    top: 0px;
}
#div3h
{
    width: 426px;
    height: 330px;
    position: absolute;
    background-color: #ccc;
    border: 8px solid #fff;
    left: 35px;
    top: 251px;
    -webkit-transform: rotate(-4deg);
}
.hua1
{
    left: -26px;
    top: -46px;
    width: 80px;
    position: absolute;
}
#div3v
{
    position: absolute;
    width: 330px;
    height: 453px;
    background-color: #ccc;
    border: 8px solid #fff;
    left: 93px;
    top: 199px;
    -webkit-transform: rotate(-3deg);
}
.hua2
{
    left: -47px;
    top: -28px;
    width: 82px;
    position: absolute;
}
#div3,#div41,#div42,#div5,#div61,#div62
{
    width: 500px;
    height: 815px;
    position: absolute;
}
#xing
{
    left: 396px;
    top: 0px;
}
#zi4
{
    left: 105px;
    top: 555px;
}
#shu5
{
    left: -114px;
    top: 643px;
}
#quan
{
    left: 409px;
    top: 695px;
}
.quan1
{
    position: absolute;
    -webkit-animation: quaning 2s linear infinite alternate;
}
#div41h
{
    width: 350px;
    height: 250px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(3deg);
    left: 77px;
    top: 27px;
    position: absolute;
}
#div41v
{
    width: 250px;
    height: 320px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(3deg);
    left: 158px;
    top: 13px;
    position: absolute;
}
#div42h
{
    width: 350px;
    height: 250px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(-4deg);
    left: 30px;
    top: 298px;
    position: absolute;
}
#div42v
{
    width: 250px;
    height: 320px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(-4deg);
    left: 27px;
    top: 278px;
    position: absolute;
}
#zi5
{
    left: 32px;
    top: 30px;
}
#q1
{
    left: 341px;
    top: 46px;
}
#cao
{
    left: 0px;
    top: 589px;
}
#div5h
{
    width: 440px;
    height: 320px;
    background-color: #ccc;
    border: 8px solid #fff;
    -webkit-transform: rotate(-4deg);
    left: 33px;
    top: 262px;
    position: absolute;
}
#div5v
{
    width: 344px;
    height: 450px;
    background-color: #ccc;
    border: 8px solid #fff;
    -webkit-transform: rotate(-3deg);
    left: 91px;
    top: 198px;
    position: absolute;
}
#zi6
{
    left: 177px;
    top: 584px;
}
#shu7
{
    left: 0px;
    top: 607px;
}
#shu8
{
    left: 260px;
    top: 0px;
}
#div61h
{
    width: 350px;
    height: 250px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(3deg);
    left: 23px;
    top: 61px;
    position: absolute;
}
#div62h
{
    width: 350px;
    height: 250px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(-4deg);
    left: 108px;
    top: 333px;
    position: absolute;
}
#div61v
{
    width: 260px;
    height: 340px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(3deg);
    left: 23px;
    top: 27px;
    position: absolute;
}
#div62v
{
    width: 260px;
    height: 340px;
    background-color: #ccc;
    border: 6px solid #fff;
    -webkit-transform: rotate(-2deg);
    left: 218px;
    top: 267px;
    position: absolute;
}
.shadow
{
    box-shadow: 5px 7px 6px rgba(134, 134, 134, 0.5);
}
#div1
{
    width: 500px;
    height: 546px;
    position: absolute;
    overflow: hidden;
    top: 21px;
}
</style>
<style type="text/css">
@-webkit-keyframes sea_in_bounce_center
{
    0%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
    50%{
        opacity:1;
        -webkit-transform:scale(1.05)
    }
    70%{
        -webkit-transform:scale(.9);
        opacity: 1
    }
    100%{
        -webkit-transform:scale(1);
        opacity: 1
    }
}
@-webkit-keyframes sea_out_bounce_center
{
    0%{
        -webkit-transform:scale(1);
        opacity: 1
    }
    25%{
        -webkit-transform:scale(.95);
        opacity: 1
    }
    50%{
        opacity:1;
        -webkit-transform:scale(1.1)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
}
@-webkit-keyframes sea_in_bounce_down
{
    0%{
        opacity:0;
        -webkit-transform:translateY(-2000px)
    }
    60%{
        opacity:1;
        -webkit-transform:translateY(30px)
    }
    80%{
        -webkit-transform:translateY(-10px);
        opacity: 1
    }
    100%{
        -webkit-transform:translateY(0);
        opacity: 1
    }
}
@-webkit-keyframes sea_out_bounce_down
{
    0%{
        -webkit-transform:translateY(0);
        opacity: 1;
    }
    20%{
        opacity:1;
        -webkit-transform:translateY(-20px)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(2000px)
    }
}
@-webkit-keyframes sea_in_bounce_up
{
    0%{
        opacity:0;
        -webkit-transform:translateY(2000px)
    }
    60%{
        opacity:1;
        -webkit-transform:translateY(-30px)
    }
    80%{
        -webkit-transform:translateY(10px);
        opacity: 1
    }
    100%{
        -webkit-transform:translateY(0);
        opacity : 1;
    }
}
@-webkit-keyframes sea_out_bounce_up
{
   0%{
    -webkit-transform:translateY(0);
    opacity: 1
    }
    20%{
        opacity:1;
        -webkit-transform:translateY(20px)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(-2000px)
    }
}   
@-webkit-keyframes sea_in_bounce_left
{
    0%{
        opacity:0;
        -webkit-transform:translateX(-2000px)
    }
    60%{
        opacity:1;
        -webkit-transform:translateX(30px)
    }
    80%{
        -webkit-transform:translateX(-10px);
        opacity: 1
    }
    100%{
        -webkit-transform:translateX(0);
        opacity: 1
    }
}
@-webkit-keyframes sea_out_bounce_left
{
    0%{
        -webkit-transform:translateX(0);
        opacity: 1
    }
    20%{
        opacity:1;
        -webkit-transform:translateX(20px)
    }
    100%{
        opacity:0;
        -webkit-transform:translateX(-2000px)
    }
}
@-webkit-keyframes sea_in_bounce_right
{
    0%{
        opacity:0;
        -webkit-transform:translateX(2000px)
    }
    60%{
        opacity:1;
        -webkit-transform:translateX(-30px)
    }
    80%{
        -webkit-transform:translateX(10px);
        opacity: 1
    }
    100%{
        -webkit-transform:translateX(0);
        opacity: 1
    }
}
@-webkit-keyframes sea_out_bounce_right
{
    0%{
        -webkit-transform:translateX(0);
        opacity: 1
    }
    20%{
        opacity:1;
        -webkit-transform:translateX(-20px)
    }
    100%{
        opacity:0;
    -webkit-transform:translateX(2000px)
    }
}
@-webkit-keyframes title_in
{
    from  {-webkit-transform: translate(-100px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes title_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(100px,0px);opacity: 0}
}
@-webkit-keyframes div1h_in
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(-200px,0px);}
}
@-webkit-keyframes div1v_in
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,-160px);}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes quaning
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(-15px,-15px);}
}
@-webkit-keyframes cao_in
{
    from  {-webkit-transform: translate(0px,200px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes cao_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,200px);opacity: 0}
}
@-webkit-keyframes shu7_in
{
    from  {-webkit-transform: translate(-150px,150px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes shu7_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-150px,150px);opacity: 0}
}
@-webkit-keyframes shu8_in
{
    from  {-webkit-transform: translate(150px,-150px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes shu8_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(150px,-150px);opacity: 0}
}
</style>

<div id='container'>
    <!-- <img src='<?=$p?>images/01.jpg'> -->

    <div id='page1' class='page'>
        <img src='<?=$p?>images/1.jpg'>
        <div id='div1'>
            <div id='div1h'><span id='word1h' class='showwords'></span></div>
            <div id='div1v'><span id='word1v' class='showwords'></span></div>
            <img id='kuang1' src='<?=$p?>images/kuang1.png'>
        </div>
        <img id='shu1' src='<?=$p?>images/shu1.png'>
        <img id='shu2' src='<?=$p?>images/shu2.png'>
        <img id='sun' src='<?=$p?>images/sun.png'>
        <img id='mao' src='<?=$p?>images/mao.png'>
        <img id='summer' src='<?=$p?>images/summer.png'>
        <img id='hua' src='<?=$p?>images/hua.png'>
        <img id='bei' src='<?=$p?>images/bei.png'>
    </div>

    <div id='page2' class='page' style='opacity:0;display:none'>
        <img src='<?=$p?>images/2.jpg'>

        <div id='div21'>
            <div id='div21h' class='shadow'><span id='word21h' class='showwords'></span></div>
            <div id='div21v' class='shadow'><span id='word21v' class='showwords'></span></div>
        </div>
        <div id='div22'>
            <div id='div22h' class='shadow'><span id='word22h' class='showwords'></span></div>
            <div id='div22v' class='shadow'><span id='word22v' class='showwords'></span></div>
        </div>

        <img id='haixing' src='<?=$p?>images/bei2.png'>
        <img id='tuoxie' src='<?=$p?>images/tuoxie.png'>
        <img id='shu3' src='<?=$p?>images/shu3.png'>
        <img id='xingli' src='<?=$p?>images/xingli.png'>
        <img id='zi2' src='<?=$p?>images/zi2.png'>
        <img id='yanjing' src='<?=$p?>images/jing.png'>

    </div>

    <div id='page3' class='page' style='opacity:0;display:none'>
        <img src='<?=$p?>images/3.jpg'>

        <div id='div3'>
            <div id='div3h'>
                <img class='hua1' src='<?=$p?>images/hua.png'>
                <span id='word3h' class='showwords'></span>
            </div>
            <div id='div3v'>
                <img class='hua2' src='<?=$p?>images/hua.png'>
                <span id='word3v' class='showwords'></span>
            </div>
        </div>

        <img id='zi3' src='<?=$p?>images/zi3.png'>
        <img id='bei3' src='<?=$p?>images/bei3.png'>
        <img id='shu4' src='<?=$p?>images/shu4.png'>
    </div>

    <div id='page4' class='page' style='opacity:0;display:none'>
        <img src='<?=$p?>images/4.jpg'>

        <div id='div41'>
            <div id='div41h' class='shadow'><span id='word41h' class='showwords'></span></div>
            <div id='div41v' class='shadow'><span id='word41v' class='showwords'></span></div>
        </div>
        <div id='div42'>
            <div id='div42h' class='shadow'><span id='word42h' class='showwords'></span></div>
            <div id='div42v' class='shadow'><span id='word42v' class='showwords'></span></div>
        </div>

        <img id='zi4' src='<?=$p?>images/zi4.png'>
        <img id='xing' src='<?=$p?>images/xing.png'>
        <img id='shu5' src='<?=$p?>images/shu5.png'>
        <div id='quan'><img class='quan1' src='<?=$p?>images/quan.png'></div>
    </div>

    <div id='page5' class='page' style='opacity:0;display:none'>
        <img src='<?=$p?>images/5.jpg'>
        <div id='div5'>
            <div id='div5h'><span id='word5h' class='showwords'></span></div>
            <div id='div5v'><span id='word5v' class='showwords'></span></div>
        </div>

        <img id='zi5' src='<?=$p?>images/zi5.png'>
        <img id='q1' src='<?=$p?>images/q1.png'>
        <img id='cao' src='<?=$p?>images/cao.png'>
    </div>

    <div id='page6' class='page' style='opacity:0;display:none'>
        <img src='<?=$p?>images/6.jpg'>

        <div id='div61'>
            <div id='div61h'><span id='word61h' class='showwords'></span></div>
            <div id='div61v'><span id='word61v' class='showwords'></span></div>
        </div>
        <div id='div62'>
            <div id='div62h'><span id='word62h' class='showwords'></span></div>
            <div id='div62v'><span id='word62v' class='showwords'></span></div>
        </div>


        <img id='shu7' src='<?=$p?>images/shu8.png'>
        <img id='shu8' src='<?=$p?>images/shu7.png'>
        <img id='zi6' src='<?=$p?>images/zi6.png'>
    </div>

    <div id='pagetitle' style="position:absolute;width:500px;height:210px;top: 252px;overflow:hidden;display:table;text-shadow: 0px 0px 3px #fff;background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0));padding-left:70px;padding-right:70px;opacity:0;">
        <div id="titlecontent" style="width:360px;height:150px;vertical-align:middle;display:table-cell;text-align:center;font-size: 30px;line-height: 50px;color: #40AAE8;"></div>
    </div> 



</div>

<script>
 
var get_pid = function(url){
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function showtitle()
{
    id('summer').style.webkitAnimation = 'sea_in_bounce_up 1s ease both';
    id('shu1').style.webkitAnimation = 'sea_in_bounce_left 1s 0.5s ease both';
    id('shu2').style.webkitAnimation = 'sea_in_bounce_right 1s 0.5s ease both';
    id('sun').style.webkitAnimation = 'sea_in_bounce_down 1s 1s ease both';
    id('mao').style.webkitAnimation = 'sea_in_bounce_up 1s 1.5s ease both';

    id('pagetitle').style.webkitAnimation = 'title_in 2s 1s ease-out both';
    id('titlecontent').innerHTML = desc;

    // setTimeout(distitle,4000)
}

function liangziyun_kawa()
{
    id('pagetitle').style.webkitAnimation = 'title_out 1s linear both';

    setImage('1');
    id('div1').style.webkitAnimation = 'fadein 2s 1s linear both';
    id('div1h').style.webkitAnimation = 'div1h_in 6.5s 1.5s linear both';
    id('div1v').style.webkitAnimation = 'div1v_in 6.5s 1.5s linear both';

    timeout[1] = setTimeout(show2, 7000)
}

function show2()
{
    setpage(2);
    setImage('21');
    setImage('22');
    id('shu1').style.webkitAnimation = 'sea_out_bounce_left 2s ease both';
    id('shu2').style.webkitAnimation = 'sea_out_bounce_right 2s ease both';
    id('sun').style.webkitAnimation = 'sea_out_bounce_up 2s 0.5s ease both';
    id('mao').style.webkitAnimation = 'sea_out_bounce_left 2s 0.5s ease both';
    id('summer').style.webkitAnimation = 'sea_out_bounce_down 2s 1s ease both';
    id('div1').style.webkitAnimation = 'fadeout 0.5s 1.5s linear both';

    id('page2').style.webkitAnimation = 'fadein 1s 1.5s linear both';
    id('shu3').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.5s ease both';
    id('zi2').style.webkitAnimation = 'sea_in_bounce_up 1.5s 1.5s ease both';
    id('yanjing').style.webkitAnimation = 'sea_in_bounce_up 1.5s 2s ease both';
    id('tuoxie').style.webkitAnimation = 'sea_in_bounce_left 1.5s 2.2s ease both';
    id('haixing').style.webkitAnimation = 'sea_in_bounce_right 1.5s 2.2s ease both';

    id('div21').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.8s ease both';
    id('div22').style.webkitAnimation = 'sea_in_bounce_right 1.5s 1.8s ease both';

    id('xingli').style.webkitAnimation = 'sea_in_bounce_down 1.5s 2.3s ease both';

    timeout[2] = setTimeout(show3,8000)
}

function show3()
{
    setpage(3);
    setImage('3');
    id('div21').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('div22').style.webkitAnimation = 'sea_out_bounce_right 1.5s ease both';
    id('xingli').style.webkitAnimation = 'sea_out_bounce_up 1.5s ease both';
    id('shu3').style.webkitAnimation = 'sea_out_bounce_left 1.5s 0.5s ease both';
    id('haixing').style.webkitAnimation = 'sea_out_bounce_right 1.5s 0.5s ease both';
    id('tuoxie').style.webkitAnimation = 'sea_out_bounce_left 1.5s 0.5s ease both';
    id('yanjing').style.webkitAnimation = 'sea_out_bounce_down 1.5s 0.5s ease both';
    id('zi2').style.webkitAnimation = 'sea_out_bounce_down 1.5s 0.7s ease both';

    id('page2').style.webkitAnimation = 'fadeout 1s 1s linear both';
    id('page3').style.webkitAnimation = 'fadein 1s 1s linear both';

    id('shu4').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.6s ease both';
    id('zi3').style.webkitAnimation = 'sea_in_bounce_right 1.5s 1.6s ease both';
    id('bei3').style.webkitAnimation = 'sea_in_bounce_left 1.5s 2s ease both';
    id('div3').style.webkitAnimation = 'sea_in_bounce_up 1.5s 2s ease both';

    timeout[3] = setTimeout(show4,7000)
}

function show4()
{
    setpage(4);
    setImage('41');
    setImage('42');
    id('shu4').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('zi3').style.webkitAnimation = 'sea_out_bounce_right 1.5s ease both';
    id('div3').style.webkitAnimation = 'sea_out_bounce_down 1.5s ease both';
    id('bei3').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('page3').style.webkitAnimation = 'fadeout 1s 1s linear both';

    id('page4').style.webkitAnimation = 'fadein 1s 1s linear both';
    id('shu5').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.5s ease both';
    id('quan').style.webkitAnimation = 'sea_in_bounce_right 1.5s 1.5s ease both';
    id('zi4').style.webkitAnimation = 'sea_in_bounce_up 1.5s 1.8s ease both';
    id('xing').style.webkitAnimation = 'fadein 1s 2s linear both';

    id('div41').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.5s ease both';
    id('div42').style.webkitAnimation = 'sea_in_bounce_right 1.5s 1.5s ease both';

    timeout[4] = setTimeout(show5,8000)
}

function show5()
{
    setpage(5);
    setImage('5');
    id('div41').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('div42').style.webkitAnimation = 'sea_out_bounce_right 1.5s ease both';
    id('shu5').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('quan').style.webkitAnimation = 'sea_out_bounce_right 1.5s ease both';
    id('zi4').style.webkitAnimation = 'sea_out_bounce_down 1.5s ease both';
    id('page4').style.webkitAnimation = 'fadeout 1s 1s linear both';

    id('page5').style.webkitAnimation = 'fadein 1s 1s linear both';
    id('cao').style.webkitAnimation = 'cao_in 1.5s 1.5s ease-out both';
    id('zi5').style.webkitAnimation  = 'sea_in_bounce_left 1.5s 1.5s ease both';
    id('q1').style.webkitAnimation  = 'sea_in_bounce_right 1.5s 1.5s ease both';
    id('div5').style.webkitAnimation = 'sea_in_bounce_center 1.5s 1.5s ease both';

    timeout[5] = setTimeout(show6,7000)
}

function show6()
{
    setpage(6)
    setImage('61');
    setImage('62');
    id('cao').style.webkitAnimation = 'cao_out 1.5s linear both';
    id('zi5').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('q1').style.webkitAnimation = 'sea_out_bounce_right 1.5s ease both';
    id('div5').style.webkitAnimation = 'sea_out_bounce_center 1.5s ease both';

    id('page5').style.webkitAnimation = 'fadeout 0.5s 1s linear both';
    id('page6').style.webkitAnimation = 'fadein 0.5s 1s linear both';

    id('shu7').style.webkitAnimation = 'shu7_in 1s 1s ease-out both';
    id('shu8').style.webkitAnimation = 'shu8_in 1s 1s ease-out both';
    id('zi6').style.webkitAnimation = 'sea_in_bounce_up 1.5s 1s ease both';
    id('div61').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.2s ease both';
    id('div62').style.webkitAnimation = 'sea_in_bounce_right 1.5s 1.2s ease both';

    id('div1h').style.webkitAnimation = '';
    id('div1v').style.webkitAnimation = '';

    timeout[6] = setTimeout(show1,8000)
}


function show1()
{
    setpage(1);
    setImage('1');
    id('shu7').style.webkitAnimation = 'shu7_out 1.5s linear both';
    id('shu8').style.webkitAnimation = 'shu8_out 1.5s linear both';
    id('zi6').style.webkitAnimation = 'sea_out_bounce_down 1.5s ease both';
    id('div61').style.webkitAnimation = 'sea_out_bounce_left 1.5s ease both';
    id('div62').style.webkitAnimation = 'sea_out_bounce_right 1.5s ease both';   
    id('page6').style.webkitAnimation = 'fadeout 1s 1s linear both';

    id('page1').style.webkitAnimation = 'fadein 1s 1s linear both';
    id('div1').style.webkitAnimation = 'fadein 1s 1.8s linear both';
    id('summer').style.webkitAnimation = 'sea_in_bounce_up 1.5s 1.5s ease both';
    id('shu1').style.webkitAnimation = 'sea_in_bounce_left 1.5s 1.5s ease both';
    id('shu2').style.webkitAnimation = 'sea_in_bounce_right 1.5s 1.5s ease both';
    id('sun').style.webkitAnimation = 'sea_in_bounce_down 1.5s 1.5s ease both';
    id('mao').style.webkitAnimation = 'sea_in_bounce_up 1.5s 1.5s ease both';
    id('div1h').style.webkitAnimation = 'div1h_in 6.5s 1s linear both';
    id('div1v').style.webkitAnimation = 'div1v_in 6.5s 1s linear both';

    timeout[7] = setTimeout(show2, 7000);
}


var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=8000;
var timeout = [];
var showfont = false;


function id (name) 
{
    return document.getElementById(name);
}

//ÿ��ִ�м��غ�6��ͼƬ
var bl_keepload = 'first';
var step_loadnum = 6;
function step_load()
{
    var load_num = 0
    //��������X��
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

var divwidth  = {'1h':700,'1v':500,'21h':320,'21v':240,'22h':320,'22v':230,'3h':426,'3v':330,'41h':350,'41v':250,'42h':350,'42v':250,'5h': 440,'5v': 344,'61h':350,'61v':260,'62h':350,'62v': 260};
var divheight = {'1h':540,'1v':700,'21h':240,'21v':320,'22h':240,'22v':308,'3h':330,'3v':453,'41h':250,'41v':320,'42h':250,'42v':320,'5h': 320,'5v': 450,'61h':250,'61v':340,'62h':250,'62v': 340};

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('div'+idname + 'h');
        div1 = id('div'+idname + 'v');
        idname = idname + 'h';
    }
    else
    {
        div = id('div'+idname + 'v');
        div1 = id('div'+idname + 'h');
        idname = idname + 'v';
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var height = divheight[idname];
    var width = divwidth[idname];

    var img = id('div'+idname);
    img.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    console.log('setimg:'+ img.style.backgroundImage);
 console.log(Onload_imgs_url[image_url_index]);
    var word = id('word'+idname);
    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {
        word_string = word_string.replace(/[\n]/ig,'');
        word.innerText = word_string;
        var word_length = word_string.length;
        if(word_length < 6)
            word.style.fontSize = "26px";
        else
            word.style.fontSize = "23px";
    }
    else
    {
        word.innerText = "";
    }

    if(img_bili > (width/height))
    {
        img.style.backgroundSize = height*img_bili + 'px '+ height + 'px';
        img.style.backgroundPosition = -((height*img_bili-width)/2)+'px 0px';
    }
    else
    {
        img.style.backgroundSize = width + 'px '+ width/img_bili + 'px';
        img.style.backgroundPosition = '0px ' +(-((width/img_bili-height)/2)) + 'px';
    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}
function setpage(pageindex)
{
    for(var i =1 ; i< 7;i++)
    {
        if(i != pageindex)
        {
            id('page' + i).style.display = 'none';
            if(pageindex == 1)
            {
                id('page6').style.display = 'block';
            }
            else
                id('page'+(pageindex-1)).style.display = 'block';
        }
        else
        {
            id('page' + i).style.display = 'block';

        }

    }
}

call_me(load_images)
function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}


function clearnode()
{
    for(var i=0; i<timeout.length;i++)
    {
        clearTimeout(timeout[i])
    }

    for(var i = 1;i<7;i++)
    {
        id('page'+i).style.display = 'none';
    }

    id('div1h').style.display = 'none';
    id('div1v').style.display = 'none';
    id('div1').style.webkitAnimation = '';
    id('pagetitle').style.webkitAnimation = '';
    id('page1').style.display = 'block';
    id('summer').style.webkitAnimation = '';
    id('shu1').style.webkitAnimation = '';
    id('shu2').style.webkitAnimation = '';
    id('sun').style.webkitAnimation = '';
    id('mao').style.webkitAnimation = '';

}
</script>